<template>
  <div>
    <ul>
      <li
        class="item-tv"
        v-for="tv in list"
        :key="tv.id"
        @click="Tvdetail(tv.id)"
      >
        <div class="img-box">
          <img :src="'https://images.weserv.nl/?url=' + tv.cover" alt="" />
        </div>
        <div class="content">
          <h3>{{ tv.title }}</h3>
          <p>
            {{ tv.rate }}
          </p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "Tv",
  data() {
    return {
      list: [],
      start: 0,
      isFinish: true,
    };
  },
  created() {
    this.getData();
  },
  mounted() {
    this.lazyload();
  },
  methods: {
    getData() {
      this.isFinish = false;
      this.axios
        .get(
          "https://bird.ioliu.cn/v1?url=https://movie.douban.com/j/search_subjects?type=movie&tag=%E7%83%AD%E9%97%A8",
          {
            params: {
              page_start: this.start,
              page_limit: 9,
            },
          }
        )
        .then((res) => {
          this.list = [...this.list, ...res.data.subjects];
          this.isFinish = true;
        });
    },
    lazyload() {
      let htmlDom = document.documentElement;
      let fullH = 0;
      let scrollT = 0;
      let deviceH = htmlDom.clientHeight;
      window.onscroll = () => {
        fullH = htmlDom.offsetHeight;
        scrollT = Math.ceil(htmlDom.scrollTop);

        //滚动到底部
        if (fullH == deviceH + scrollT) {
          this.start += 9;
          if (this.start < 54) {
            this.getData();
          }
        }
      };
    },
    Tvdetail(ID) {
      this.$router.push("/tv2/" + ID);
      // console.log(this.list);
    },
  },
};
</script>

<style lang="scss" scoped>
.item-tv {
  display: flex;
  border-bottom: 1px solid gray;
  .content {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    text-align: center;
    flex: 5;
    padding: 0.6rem;
    h3 {
      margin-bottom: 10px;
      font-weight: bold;
    }
    p {
      color: orange;
    }
  }
  .img-box {
    flex: 3;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>